html,
body {
    width: 100%;
    height: 100%;
}

.container {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    /* align-items: center; */
}

.notecontainer {
    width: 70%;
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    padding-top: 45px;
    margin-top: 10px;
}

.notetitle {
    width: 100%;
    height: 100px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: baseline;
}

.notetitle h2 {
    margin-bottom: 10px;
}

.user_control {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
}

.label {
    font-size: 20px;
}

.title {
    width: 50%;
    height: 30px;
    margin-top: 5px;
}

.isClose {
    width: 45px;
    height: 45px;
    /* background-color: #FE7300; */
    margin-left: 10px;
    border-radius: 15px;
    background: url('../../images/close.png');
    background-size: 100%;
}

.isOpen {
    background: url('../../images/open.png');
    background-size: 100%;
}

#save {
    width: 70px;
    height: 35px;
    background-color: #FE7300;
    color: #fff;
    font-size: 16px;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    margin-left: 8px;
    border-radius: 5px;
}

#save:hover {
    box-shadow: 0 0 5px #ccc;
}

.waringinfo {
    color: #FE7300;
    display: none;
    margin-left: 8px;
}

.notecontent {
    width: 100%;
    height: 900px;
    /* background-color: azure; */
    display: flex;
    flex-direction: row;
}

.md {
    width: 50%;
    height: 600px;
    resize: none;
    margin-right: 2px;
    /* height: 200px; */
    margin-top: 10px;
    background-color: #FFE4B5;
}

#html {
    border: 1px solid #ccc;
}